<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0  minimum-scale=1.0, maximum-scale=2.0" />
<meta name="MobileOptimized" content="240" />
<link rel="stylesheet" type="text/css" href="/mobile/css/base.css"/>
<script type="text/javascript" src="/common/js/zepto.js"></script>
<script type="text/javascript" src="/mobile/scripts/context.js" ></script>
<script type="text/javascript" src="/app/scripts/common_lib.js" ></script>
<title>品质从此无忧-麦丰网</title>
<style type="text/css">

body {
	margin: 0px;
	background:#f1f1f1;
	font-family:Helvetica,STHeiti STXihei,Microsoft JhengHei,Microsoft YaHei,Tohoma,Arial;
	text-align: center;
	width:100%;
}

.div-header {
	width: 100%;
	height: 45px;
	color: #FFF;
	margin: 0 auto;
	line-height: 45px;
	text-align: left;
	background: url(images/red_bg.jpg) repeat;
}

#name{ 
	font-size:18px; 
	line-height:45px; 
	padding-left:0px; 
	margin-left:0px;
	width:200px; 
	height:45px; 
	float:left;
	padding-left: 10px;
}

ul,li{list-style:none; padding: 0;margin: 0;}

.div-leader {
	width: 100%;
	max-width:320px;
	height: 25px;
	background-color: transparent;
	margin: 0 auto;
	/*
	left:50%;
	margin-left:-160px;
	position:fixed; 
	*/
}
.table-leader {
	width: 100%;
	text-align: center;
}

.table-leader td {
	text-align: center;
}

.menu1{color:#777;line-height:23px; width:12%;  padding:0px 2px; border-bottom:1px solid #CCC;  font-size:14px; }
.menu2{color:#ff3f40;line-height:23px;  width:12%; padding:0px 2px; border-bottom:1px solid #ff3f40; font-weight:bold; font-size:14px;}

.i_box a {
	padding: 2px 5px;
	background-color: #e9e9e9;
	border: 1px solid #ccc;
	text-decoration: none;
	color: #585858;
	line-height: 20px;
}
.i_box * {
	vertical-align: middle;
}
.i_box input {
	width: 30px;
	height: 18px;
	margin: 0 8px;
	padding: 2px;
	border: 1px solid #ccc;
	text-align: center;
	line-height: 16px;
}

.div-banner {
	width:320px;
	height: 195px;
	background-color: white;
	margin: 0 auto;
	margin-top: 5px;
	/*
	left:50%;
	margin-top: 30px;
	margin-left: -160px;
	position: fixed;
	*/
}

.div-content {
	width: 100%;
	max-width: 330px;
	margin: 0 auto;
}
.div-product {
	width: 100%;
	max-width: 330px;
	height: 150px;
	margin: 0 auto;
	margin-top: 8px;
}

.div-image {
	width: 60%;
	height: 100%;
	float: left;
}

.div-name {
	width: 40%;
	height: 40%;
	float: right;
}

.div-description {
	width: 40%;
	height: 60%;
	float: right;
}

.img-product {
	width: 100%;
	height: 100%;
}

.div-footer {
	width: 100%;
	max-width: 330px;
	height:100px;
	background-color: #CCC;
	top: 100%;
	margin: 0 auto;
	margin-top: 8px;
	margin-bottom: 50px;
}

.div-bottom {
	width: 100%;
	height: 50px;
	top: 100%;
	left:-50%;
	margin-left:50%;
	margin-top: -50px;
	position: fixed;
}

.div-loading {
	width:35px;
	height:35px;
	margin: 0 auto;
	margin-top: 5px;
	margin-bottom: 5px;
	display: none;
}

.img-loading {
	width: 100%;
	height: 100%;
}

#table-bottom { 
	width:100%; 
	height:35px;	
	line-height:35px; 
	background:#333;
	color: #CCC;
	bottom: 0px;
	position: fixed;
}

.div-image-desk {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 99;
	display: none;
	
}

.div-image-figure{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 100;
}

.div-image-figure-bg{
	width: 100%;
	height: 100%;
	background-color: #222222;
	position: absolute;
	opacity: .5;
	filter: alpha(opacity=50);
	-moz-opacity: .5;
	-khtml-opacity: .5;
}

.div-image-close{
	width: 40px;
	height: 40px;
	float: right;
	opacity: 1;
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	z-index: 101;
}

.a-image-close{
	width: 34px;
	height: 33px;
	float:right;
	background: url(/mobile/images/dialogclose.png) no-repeat center;
	margin-top: 2px;
	margin-right: 2px;
}
.div-image-show {
	margin: 0 auto;
	margin-top: 40px;
}

#image-show-original{
	border:1px solid #CCC;
	background-color: #FFF;
	padding: 8px;
}

.div-section {
	background-color: #FFF;
	text-align: left;
	padding: 8px;
	margin-top: 8px;
	border: #dcdada solid 1px;background-color:#FFF; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
}

.div-text {
	text-align: left;
	font-size:14px; 
	padding:5px; 
	color:#666; 
	line-height:18px;
}

.div-text p {
	margin:0;
	text-indent: 18px;
	margin-top: 3px;
	text-align: justify;
}

.div-text .div-text-header {
	border-bottom:1px dashed #CCCCCC; color:#666; font-size:13px; font-weight:bold;padding-bottom: 3px;
	background: url(/mobile/images/notice.png) no-repeat;
	padding-left: 18px;
}



.menu-down{float:left; border:1px solid #ff3e3f; background:url(images/select_icon.png) #FFF right bottom no-repeat; padding:0px 5px;height:22px; line-height:25px; color:#000000; font-size:14px; margin-right:5px; margin-bottom:5px; text-align:center;}
.menu-up{float:left;border:1px solid #CCCCCC; font-size:14px; padding:0px 5px;height:22px; color:#000000; line-height:25px; margin-right:5px;margin-bottom:5px; text-align:center; background:#FFFFFF}
.menu-note{float:left; border:1px solid #666666; background:url(images/note_icon.png) #FFF right bottom no-repeat; padding:0px 5px;height:22px; line-height:25px; color:#666666; font-size:14px; margin-right:5px; margin-bottom:5px; text-align:center;}


.bitButton{ margin-top:10px;border:0;width:100%; height:40px; font-size:18px; font-weight:bold; background:url(images/button_bg.jpg) repeat; color:#FFFFFF; line-height:36px; text-align:center; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}

</style>
</head>
<body>
	<div class="div-header">
		<ul>
			<li id="name"></li>
			<li id="user" onclick="location.href='/'"></li>
		</ul>
	</div>
	
	<div class="div-image-desk">
		<div class="div-image-figure">
			<a class="a-image-close" href="javascript:;" onclick="closeBigImage()"></a>
			<div class="div-image-show">
				<img id="image-show-original"/>
			</div>
		</div>
		<div class="div-image-figure-bg"></div>
	</div>
	
	
	<div class = "div-content">
		<form id="form-product">
			<input type="hidden" id = "product_id" name="product_id" value = "0"/>
			<input type="hidden" id = "catalog_id" name="catalog_id" value = "0"/>
			<input type="hidden" id = "specification_id" name="specification_id" value = "0"/>
		</form>
		<div class="div-section">
		
		<table width="100%" border="0" cellspacing="5" cellpadding="0" style="background:#FFFFFF">
		  <tr>
		    <td width="120px" rowspan="3" onclick="javascript:;"><a href="javascript:;" onclick="showBigImage()"><img id="spec-image" name="spec-image" style="border:1px solid #CCC;" width="120" height="120" alt="" /></a></td>
		    <td id="product-name" height="45" valign="top" onclick="javascript:;" style="text-align: left;padding-left: 5px;font-size:17px;line-height: 19px;"></td>
		  </tr>
		  <tr>
		    <td valign="middle" style="text-align:left;height: 28px;">
		    	<font style="line-height:25px; color:#FF3f40; font-size:20px;">&yen;&nbsp;<span id="spec-price" style="font-weight: bold;"></span></font>
		        <!--  
		        <input style=" float:left;color:#FF0000; text-align:left; line-height:33px; font-weight:bold; font-size:16px; margin-left:-3px; border:0;" size="10" name="spec-price" id="spec-price" readonly="readonly" value=""></input>
		        -->
		        <div style="display:none; float:right; color:#999; font-size:10px; line-height:22px; font-weight:bold">请选择品类/规格</div>
		    </td>
		  </tr>
		  <tr>
		  	<td style="text-align: right;height: 40px;">
				<font style="line-height:15px; color:#999; font-size:14px;">香港报价：$&nbsp;<span id="spec-real-price" style="font-weight: bold;"></span><br />
				折算人民币约：&yen;&nbsp;<span id="spec-rmb-real-price" style="font-weight: bold;"></span>
				</font>
		  	</td>
		  </tr>
		  </table>
		
		<div style="max-width:740px; margin:0px auto;padding:5px">
		  <table width="100%" border="0" cellspacing="5" cellpadding="0">
		  <tr>
		    <td width="100%" colspan="4" style="border-bottom:1px solid #CCC; font-size:12px;text-align: left;" >请选择品类</td>
		  </tr>
		  <tr>
		    <td colspan="4" style="font-size:12px; color:#999">
			    <div>
			    	<ul id="catalog">
					</ul>
				</div>
		    </td>
		  </tr>
		  <tr>
		    <td width="100%" colspan="4" height="5px" ></td>
		  </tr>
		  <tr>
		    <td width="100%" colspan="4" style="border-bottom:1px solid #CCC; font-size:12px;text-align: left;" >请选择规格</td>
		  </tr>
		  <tr>
		    <td colspan="4" style="font-size:12px; color:#999">
			    <div>
			    	<ul id="specification">
					</ul>
				</div>
		    </td>
		  </tr>
		  <tr>
		    <td width="100%" colspan="4" height="5px" ></td>
		  </tr>
		  <tr>
		    <td colspan="4" style="font-size:12px; color:#999;border-top:1px solid #CCC; font-size:12px">
		    <div>
		    	<ul>
			    	<li style="float:left; margin-top:10px; font-size:18px; line-height:35px;">购买数量</li>
			    	<li style="float:right; margin-top:10px; line-height:35px;">
			        	<div class="i_box">
				            <a href="javascript:;" class="J_minus">-</a>
				            <input type="text" name="Pro_Num" id="Pro_Num" size="2" class="J_input"  value="1" />
				            <a href="javascript:;" class="J_add">+</a>
				        </div>        
			        </li>
		        </ul>
		    </div>
		    </td>
		  </tr>
		  </table>
		</div>

		<div style="max-width:740px; margin:0px auto;margin-top:-15px;">
			<table width="100%" border="0" cellspacing="0" cellpadding="5" id="buybutton" name="buybutton">
			  <tr>
			    <td width="50%"><input type="button" class="bitButton" onclick="buyNow()" value="购  买" /></td>
			    <td width="50%"><input type="button" class="bitButton" onclick="addToCart()" value="放入购物车" /></td>
			  </tr>
			</table>
		</div>
	</div>
	<div class="div-section">
	    <div class="div-text">
	    	<div class="div-text-header">网站声明</div>
	    	<p><span class="site_name"></span>是一家提供香港正品代购服务的专业网站，以移动电商为媒介，以品质保证为宗旨，为客户提供方便、快捷、品质放心的代购服务。</p>
	    </div>
	    <div class="div-text" style="text-align: center;text-indent: 0px;display: none;">
	    	<a href="javascript:;" style="">查看更多...</a>
	    </div>
	    
	    
	    <div class="div-text">
	    	<div class="div-text-header">了解商品</div>
	    	<table>
	    		<tr>
	    			<td style="vertical-align: text-top;">1.</td>
	    			<td>所有商品只在香港的品牌专卖店、专柜、以及大型商场选购.</td>
	    		</tr>
	    		<tr>
	    			<td style="vertical-align: text-top;">2.</td>
	    			<td>保留所有购物凭证/小票，随商品一起提供给消费者.</td>
	    		</tr>
	    		<tr>
	    			<td style="vertical-align: text-top;">3.</td>
	    			<td>支持全球验货.</td>
	    		</tr>
	    	</table>
	    </div>
	    
	     <div class="div-text">
	    	<div class="div-text-header">代购费用</div>
	    	<p>代购商品需收取服务费用，用来支撑网站的运营，希望客户能够理解和支持。</p>
	    	<p>代购服务费用与客户订单中所有商品的总额度相关，并根据总额度采用阶梯计费方式计算，细则如下：</p>
	    	<table>
	    		<tr>
	    			<td style="vertical-align: text-top;">1.</td>
	    			<td>额度处于300元以下的部分，费用为30元.</td>
	    		</tr>
	    		<tr>
	    			<td style="vertical-align: text-top;">2.</td>
	    			<td>额度处于301~1000元的部分，费用为10%.</td>
	    		</tr>
	    		<tr>
	    			<td style="vertical-align: text-top;">3.</td>
	    			<td>额度处于1001~5000元的部分，费用为8%.</td>
	    		</tr>
	    		<tr>
	    			<td style="vertical-align: text-top;">4.</td>
	    			<td>额度处于5001元以上的部分，费用为5%.</td>
	    		</tr>
	    	</table>
	    </div>
	    
	    <div class="div-text">
	    	<div class="div-text-header">如何下单</div>
	    	<table>
	    		<tr>
	    			<td style="vertical-align: text-top;">1.</td>
	    			<td>用户浏览网站，挑选自己需要的商品，并放入购物车，如需要多件商品，则一起放入购物车.</td>
	    		</tr>
	    		<tr>
	    			<td style="vertical-align: text-top;">2.</td>
	    			<td>商品挑选完成后，进入购物车结算，此时支付的是商品的代购订金.</td>
	    		</tr>
	    		<tr>
	    			<td style="vertical-align: text-top;">3.</td>
	    			<td>代购订金支付成功后，网站工作人员会在后台查收到订单信息，并立即赴港采购.</td>
	    		</tr>
	    		<tr>
	    			<td style="vertical-align: text-top;">4.</td>
	    			<td>采购完成后，会将商品实际总额、代购服务费用、物流费用告知客户，并请客户及时补齐订单差价.</td>
	    		</tr>
	    		<tr>
	    			<td style="vertical-align: text-top;">5.</td>
	    			<td>商品差价支付完成后，我们会第一时间将商品以及购物凭证打包寄给客户。</td>
	    		</tr>
	    	</table>
	    </div>
	</div>
	</div>
	
	<div class = "div-footer">
		<iframe class = "iframe-view" src="/mobile/footer.html" style="padding: 0;margin: 0;width: 100%;height: 100%;" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
	</div>
	<div class = "div-bottom">
		<iframe class = "iframe-view" src="/mobile/bottom.html" style="padding: 0;margin: 0;width: 100%;height: 100%;" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
	</div>
	<div class = "div-footer" style="display: none">
	  <table width="100%" border="0" cellspacing="0" cellpadding="0">
	  	<tr>
	    	<td height="30" colspan="4" align="center"  style="background:url(/mobile/images/line_buttom.png) repeat-x; height:9px"></td>
	    </tr>
	    <tr>
		    <td width="25%" onclick="location.href='/'" height="35" align="center">首页</td>
		    <td width="25%" onclick="javascript:;" align="center">关于我们</td>
		    <td width="25%" onclick="javascript:;" align="center">友情链接</td>
		    <td width="25%" onclick="javascript:;" align="center">帮助</td>
	  	</tr>
		<tr>
		    <td style="font-size:10px; color:#666666" colspan="4" height="20px" align="center" valign="middle">&copy; 2014 KissBaby版权所有</td>
		</tr>
	  </table>
	</div>
	
	<div class = "div-bottom" style="display: none">
		<table cellpadding="2" id="table-bottom">
			<tr>
		   	  <td width="33%" align="center" nowrap="nowrap" id="account" style="border-right:1px solid #000" onclick="location.href='/'"><img src="/mobile/images/s_home.png" style="margin-top:-3px" width="18" height="18" align="absmiddle" />更多优选</td>
		   	  <td width="33%" align="center" nowrap="nowrap" id="account" style="border-right:1px solid #000" onclick="goService()"><img src="/mobile/images/s_user.png" style="margin-top:-3px" width="18" height="18" align="absmiddle" /> 订单中心</td>
		   	  <td width="33%" align="center" nowrap="nowrap" id="account" style="border-right:1px solid #000" onclick="javascript:;"><img src="/mobile/images/s_car.png" style="margin-top:-3px" width="18" height="18" align="absmiddle" /> 购物车(0)</td>
		    </tr>
		</table>
		
	</div>
</body>
<script type="text/javascript">
	$(document).ready(function() {
		cjl.getTitle();
		getSiteInfo();
		var id = cjl.requestData("product_id");
		$("#product_id").val(id);
		getProductDetail();
		//getProductById(id);
		//getCatalogListByProductId(id);
	});
	
	function getSiteInfo() {
		var url = "/common/aboutus";
		cjl.get(url, {}, function(body){
			var aboutUs = body;
			$(".site_name").text(aboutUs.site_name);
		});
	}
	
	function getProductDetail() {
		var url = "/product/detail";
		var params = $("#form-product").serialize();
		cjl.get(url, params, function(body) {
			var product = body.product;
			var catalog_id = body.catalog_id;
			var specification_id = body.specification_id;
			var list_catalog = body.list_catalog;
			var list_specification = body.list_specification;
			var specification;
			
			$("#catalog_id").val(catalog_id);
			$("#specification_id").val(specification_id);
			
			
			var $catalog = $("#catalog");
			$catalog.empty();
			for(var o in list_catalog) {
				var catalog = list_catalog[o];
				var html = '';
				if(catalog.active) {
					if($("#catalog_id").val() == catalog.id) {
						html += '<li class="menu-down" onclick="javascript:;">'+catalog.name+'</li>'
					} else {
						html += '<li class="menu-up" onclick="selectCatalog('+catalog.id+')">'+catalog.name+'</li>'
					}
				} else {
					html += '<li class="menu-note">'+catalog.name+'</li>'
				}
				$catalog.append(html);
			}
			
			var $specification = $("#specification");
			$specification.empty();
			for(var o in list_specification) {
				var spec = list_specification[o];
				var html = '';
				if(spec.active) {
					if($("#specification_id").val() == spec.id) {
						specification = spec;
						html += '<li class="menu-down" onclick="javascript:;">'+spec.name+'</li>'
					} else {
						html += '<li class="menu-up" onclick="selectSpecification('+spec.id+')">'+spec.name+'</li>'
					}
				} else {
					html += '<li class="menu-note">'+spec.name+'</li>'
				}
				
				$specification.append(html);
			}
			resetElements(product, catalog, specification); 
		});
	}
	
	function resetElements(product, catalog, specification) {
		if(product != null && product != 'undefined') {
			$("#name").text(product.brand);
			$("#product-name").text(product.name);
		}
		if(specification != null && specification != 'undefined') {
			$("#spec-image").attr("src",specification.image);
			$("#spec-price").text(specification.price.toFixed(2));
			$("#spec-real-price").text(specification.real_price.toFixed(2));
			$("#spec-rmb-real-price").text(specification.rmb_real_price.toFixed(2));
			$("#image-show-original").attr("src",specification.image);
		}
		$("#Pro_Num").val(1);
	}
	
	
	function selectCatalog(id){
		$("#catalog_id").val(id);
		$("#specification_id").val(0);
		getProductDetail();
	}
	
	function selectSpecification(id){
		$("#specification_id").val(id);
		getProductDetail();
	}
	
	function addToCart() {
		var url = "/cart/item/add";
		var specification_id = $("#specification_id").val();
		var quantity = $("#Pro_Num").val();
		
		if(specification_id == 0) {
			alert("目前缺货");
			return;
		}
		cjl.post(url, {specification_id:specification_id, quantity:quantity}, function(body) {
			alert("已加入购物车");
		});
	}
	
	function buyNow() {
		var specification_id = $("#specification_id").val();
		var quantity = $("#Pro_Num").val();
		
		var url = "/user/state";
		cjl.get(url, {}, function(state) {
			if(!state) {
				window.parent.location.href="/mobile/login.html?jump=back";
			} else {
				cjl.post("/order/direct",{specification_id:specification_id, quantity:quantity}, function(body) {
					window.parent.location.href="/mobile/orderConfirm.html";
				});
			}
		});
	}
	
	function showBigImage() {
		$(".div-image-desk").show();
	}
	
	function closeBigImage() {
		$(".div-image-desk").hide();
	}

</script>
<script type="text/javascript">

$.fn.iVaryVal=function(iSet,CallBack){
	/*
	 * Minus:点击元素--减小
	 * Add:点击元素--增加
	 * Input:表单元素
	 * Min:表单的最小值，非负整数
	 * Max:表单的最大值，正整数
	 */
	iSet=$.extend({Minus:$('.J_minus'),Add:$('.J_add'),Input:$('.J_input'),Min:1,Max:1000},iSet);
	var C=null,O=null;
	//插件返回值
	var $CB={};
	//增加
	iSet.Add.each(function(i){
		$(this).click(function(){
			O=parseInt(iSet.Input.eq(i).val());
			(O+1<=iSet.Max) || (iSet.Max==null) ? iSet.Input.eq(i).val(O+1) : iSet.Input.eq(i).val(iSet.Max);
			//输出当前改变后的值
			$CB.val=iSet.Input.eq(i).val();
			$CB.index=i;
			//回调函数
			if (typeof CallBack == 'function') {
                CallBack($CB.val,$CB.index);
            }
		});
	});
	//减少
	iSet.Minus.each(function(i){
		$(this).click(function(){
			O=parseInt(iSet.Input.eq(i).val());
			O-1<iSet.Min ? iSet.Input.eq(i).val(iSet.Min) : iSet.Input.eq(i).val(O-1);
			$CB.val=iSet.Input.eq(i).val();
			$CB.index=i;
			//回调函数
			if (typeof CallBack == 'function') {
				CallBack($CB.val,$CB.index);
		  	}
		});
	});
	//手动
	iSet.Input.bind({
		'click':function(){
			O=parseInt($(this).val());
			$(this).select();
		},
		'keyup':function(e){
			if($(this).val()!=''){
				C=parseInt($(this).val());
				//非负整数判断
				if(/^[1-9]\d*|0$/.test(C)){
					$(this).val(C);
					O=C;
				}else{
					$(this).val(O);
				}
			}
			//键盘控制：上右--加，下左--减
			if(e.keyCode==38 || e.keyCode==39){
				iSet.Add.eq(iSet.Input.index(this)).click();
			}
			if(e.keyCode==37 || e.keyCode==40){
				iSet.Minus.eq(iSet.Input.index(this)).click();
			}
			//输出当前改变后的值
			$CB.val=$(this).val();
			$CB.index=iSet.Input.index(this);
			//回调函数
			if (typeof CallBack == 'function') {
                CallBack($CB.val,$CB.index);
            }
		},
		'blur':function(){
			$(this).trigger('keyup');
			if($(this).val()==''){
				$(this).val(O);
			}
			//判断输入值是否超出最大最小值
			if(iSet.Max){
				if(O>iSet.Max){
					$(this).val(iSet.Max);
				}
			}
			if(O<iSet.Min){
				$(this).val(iSet.Min);
			}
			//输出当前改变后的值
			$CB.val=$(this).val();
			$CB.index=iSet.Input.index(this);
			//回调函数
			if (typeof CallBack == 'function') {
                CallBack($CB.val,$CB.index);
            }
		}
	});
}
//调用
$( function() {
	$('.i_box').iVaryVal({},function(value,index){
		$('.i_tips').html('你点击的表单索引是：'+index+'；改变后的表单值是：'+value);
	});
});

</script>
</html>